
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Protable - Admin Dashboard Template</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/media/image/favicon.png"/>

    <!-- Plugin styles -->
    <link rel="stylesheet" href="vendors/bundle.css" type="text/css">

    <!-- Prism -->
    <link rel="stylesheet" href="vendors/prism/prism.css" type="text/css">

    <!-- App styles -->
    <link rel="stylesheet" href="assets/css/app.min.css" type="text/css">
</head>
<body>

<!-- begin::preloader-->
<div class="preloader">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50px" height="50px" viewBox="0 0 128 128"
         xml:space="preserve">
        <rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF"/>
        <g>
            <path d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z"
                  fill="#000000" fill-opacity="1"/>
            <animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64"
                              dur="500ms" repeatCount="indefinite">
            </animateTransform>
        </g>
    </svg>
</div>
<!-- end::preloader -->

<!-- begin::navigation -->
<div class="navigation">

    <!-- begin::logo -->
    <div id="logo">
        <a href="index.html">
            <img class="logo" src="assets/media/image/logo.png" alt="logo">
            <img class="logo-sm" src="assets/media/image/logo-sm.png" alt="small logo">
            <img class="logo-dark" src="assets/media/image/logo-dark.png" alt="dark logo">
        </a>
    </div>
    <!-- end::logo -->

    <!-- begin::navigation header -->
    <header class="navigation-header">
        <figure class="avatar avatar-state-success">
            <img src="assets/media/image/user/man_avatar3.jpg" class="rounded-circle" alt="image">
        </figure>
        <div>
            <h5>Nikos Pedlow</h5>
            <p class="text-muted">Administrator</p>
            <ul class="nav">
                <li class="nav-item">
                    <a href="profile.html" class="btn nav-link bg-info-bright" title="Profile" data-toggle="tooltip">
                        <i data-feather="user"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="btn nav-link bg-success-bright" title="Settings" data-toggle="tooltip">
                        <i data-feather="settings"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="login.html" class="btn nav-link bg-danger-bright" title="Logout" data-toggle="tooltip">
                        <i data-feather="log-out"></i>
                    </a>
                </li>
            </ul>
        </div>
    </header>
    <!-- end::navigation header -->

    <!-- begin::navigation menu -->
    <div class="navigation-menu-body">
        <ul>
            <li class="navigation-divider">Main</li>
            <li>
                <a href="index.html">
                    <i class="nav-link-icon" data-feather="bar-chart-2"></i>
                    <span>Dashboard</span>
                </a>
                <ul>
                    <li><a href="index.html">Dashboard 1</a></li>
                    <li><a href="dashboard-two.html">Dashboard 2</a></li>
                </ul>
            </li>
            <li>
                <a href="chat.html">
                    <i class="nav-link-icon" data-feather="message-circle"></i>
                    <span>Chat</span>
                    <span class="badge badge-danger">2</span>
                </a>
            </li>
            <li>
                <a href="inbox.html">
                    <i class="nav-link-icon" data-feather="mail"></i>
                    <span>Mail</span>
                    <span class="badge badge-success">2</span>
                </a>
            </li>
            <li>
                <a href="app-todo.html">
                    <i class="nav-link-icon" data-feather="check-circle"></i>
                    <span>Todo</span>
                    <span class="badge badge-warning">2</span>
                </a>
            </li>
            <li>
                <a href="file-manager.html">
                    <i class="nav-link-icon" data-feather="file"></i>
                    <span>File Manager</span>
                </a>
            </li>
            <li>
                <a href="calendar.html">
                    <i class="nav-link-icon" data-feather="calendar"></i>
                    <span>Calendar</span>
                </a>
            </li>
            <li class="navigation-divider">UI Elements</li>
            <li class="open">
                <a href="#">
                    <i class="nav-link-icon" data-feather="monitor"></i>
                    <span>Components</span>
                </a>
                <ul>
                    <li class="open">
                        <a href="#">Basic</a>
                        <ul>
                            <li><a href="alerts.html">Alert</a></li>
                            <li><a href="accordion.html">Accordion</a></li>
                            <li><a class="active" href="buttons.html">Buttons</a></li>
                            <li><a href="dropdown.html">Dropdown</a></li>
                            <li><a href="list-group.html">List Group</a></li>
                            <li><a href="pagination.html">Pagination</a></li>
                            <li><a href="typography.html">Typography</a></li>
                            <li><a href="media-object.html">Media Object</a></li>
                            <li><a href="progress.html">Progress</a></li>
                            <li><a href="modal.html">Modal</a></li>
                            <li><a href="spinners.html">Spinners</a></li>
                            <li><a href="navs.html">Navs</a></li>
                            <li><a href="tab.html">Tab</a></li>
                            <li><a href="tooltip.html">Tooltip</a></li>
                            <li><a href="popovers.html">Popovers</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Cards</a>
                        <ul>
                            <li><a href="basic-cards.html">Basic Cards </a></li>
                            <li><a href="image-cards.html">Image Cards </a></li>
                            <li><a href="card-scroll.html">Card Scroll </a></li>
                            <li><a href="other-cards.html">Others </a></li>
                        </ul>
                    </li>
                    <li><a href="avatar.html">Avatar</a></li>
                    <li><a href="icons.html">Icons</a></li>
                    <li><a href="colors.html">Colors</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="globe"></i>
                    <span>Plugins</span>
                </a>
                <ul>
                    <li><a href="sweet-alert.html">Sweet Alert</a></li>
                    <li><a href="lightbox.html">Lightbox</a></li>
                    <li><a href="toast.html">Toast</a></li>
                    <li><a href="tour.html">Tour</a></li>
                    <li><a href="slick-slide.html">Slick Slide</a></li>
                    <li><a href="nestable.html">Nestable</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="mouse-pointer"></i>
                    <span>Forms</span>
                </a>
                <ul>
                    <li><a href="basic-form.html">Form Layouts</a></li>
                    <li><a href="custom-form.html">Custom Forms</a></li>
                    <li><a href="advanced-form.html">Advanced Form</a></li>
                    <li><a href="form-validation.html">Validation</a></li>
                    <li><a href="form-wizard.html">Wizard</a></li>
                    <li><a href="file-upload.html">File Upload</a></li>
                    <li><a href="datepicker.html">Datepicker</a></li>
                    <li><a href="timepicker.html">Timepicker</a></li>
                    <li><a href="colorpicker.html">Colorpicker</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="grid"></i>
                    <span>Tables</span>
                </a>
                <ul>
                    <li><a href="tables.html">Basic Tables</a></li>
                    <li><a href="data-table.html">Datatable</a></li>
                    <li><a href="responsive-table.html">Responsive Tables</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="pie-chart"></i>
                    <span>Charts</span>
                </a>
                <ul>
                    <li><a href="apexchart.html">Apex</a></li>
                    <li><a href="chartjs.html">Chartjs</a></li>
                    <li><a href="justgage.html">Justgage</a></li>
                    <li><a href="morsis.html">Morsis</a></li>
                    <li><a href="peity.html">Peity</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="map-pin"></i>
                    <span>Maps</span>
                </a>
                <ul>
                    <li><a href="google-map.html">Google</a></li>
                    <li><a href="vector-map.html">Vector</a></li>
                </ul>
            </li>
            <li class="navigation-divider">Extras</li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="user"></i>
                    <span>Authentication</span>
                </a>
                <ul>
                    <li><a href="login.html">Login</a></li>
                    <li><a href="register.html">Register</a></li>
                    <li><a href="recover-password.html">Recovery Password</a></li>
                    <li><a href="lock-screen.html">Lock Screen</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="copy"></i>
                    <span>Pages</span>
                </a>
                <ul>
                    <li><a href="profile.html">Profile</a></li>
                    <li><a href="timeline.html">Timeline</a></li>
                    <li><a href="invoice.html">Invoice</a></li>

                    <li><a href="pricing-table.html">Pricing Table</a></li>
                    <li><a href="search-result.html">Search Result</a></li>
                    <li>
                        <a href="#">Error Pages</a>
                        <ul>
                            <li><a href="404.html">404</a></li>
                            <li><a href="404-2.html">404 V2</a></li>
                            <li><a href="503.html">503</a></li>
                            <li><a href="mean-at-work.html">Mean at Work</a></li>
                        </ul>
                    </li>
                    <li><a href="blank-page.html">Starter Page</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="send"></i>
                    <span>Email Templates</span>
                </a>
                <ul>
                    <li><a href="email-template-basic.html">Basic</a></li>
                    <li><a href="email-template-alert.html">Alert</a></li>
                    <li><a href="email-template-billing.html">Billing</a></li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="nav-link-icon" data-feather="menu"></i>
                    <span>Menu Level</span>
                </a>
                <ul>
                    <li>
                        <a href="#">Menu Level</a>
                        <ul>
                            <li>
                                <a href="#">Menu Level </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- end::navigation menu -->

</div>
<!-- end::navigation -->

<!-- begin::main -->
<div id="main">

    <!-- begin::header -->
    <div class="header">

        <!-- begin::header left -->
        <ul class="navbar-nav">

            <!-- begin::navigation-toggler -->
            <li class="nav-item navigation-toggler">
                <a href="#" class="nav-link">
                    <i data-feather="menu"></i>
                </a>
            </li>
            <!-- end::navigation-toggler -->

            <!-- begin::header-logo -->
            <li class="nav-item" id="header-logo">
                <a href="index.html">
                    <img class="logo" src="assets/media/image/logo.png" alt="logo">
                    <img class="logo-sm" src="assets/media/image/logo-sm.png" alt="small logo">
                    <img class="logo-dark" src="assets/media/image/logo-dark.png" alt="dark logo">
                </a>
            </li>
            <!-- end::header-logo -->
        </ul>
        <!-- end::header left -->

        <!-- begin::header-right -->
        <div class="header-right">
            <ul class="navbar-nav">

                <!-- begin::search-form -->
                <li class="nav-item search-form">
                    <div class="row">
                        <div class="col-md-6">
                            <form>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search">
                                    <div class="input-group-append">
                                        <button class="btn btn-default" type="button">
                                            <i data-feather="search"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </li>
                <!-- end::search-form -->

                <!-- begin::header minimize/maximize -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link" title="Fullscreen" data-toggle="fullscreen">
                        <i class="maximize" data-feather="maximize"></i>
                        <i class="minimize" data-feather="minimize"></i>
                    </a>
                </li>
                <!-- end::header minimize/maximize -->

                <!-- begin::header app list -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link" title="Apps" data-toggle="dropdown">
                        <i data-feather="grid"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-big">
                        <div class="p-3">
                            <h6 class="text-uppercase font-size-11 mb-3">Web Apps</h6>
                            <div class="row row-xs">
                                <div class="col-6">
                                    <a href="chat.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center mb-3">
                                            <i class="text-success width-23 height-23" data-feather="message-circle"></i>
                                            <div class="mt-2">Chat</div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="inbox.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center mb-3">
                                            <i class="text-info width-23 height-23" data-feather="mail"></i>
                                            <div class="mt-2">Mail</div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="calendar.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center">
                                            <i class="text-warning width-23 height-23" data-feather="calendar"></i>
                                            <div class="mt-2">Calendar</div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="file-manager.html">
                                        <div class="text-uppercase font-size-11 p-3 border-radius-1 border text-center">
                                            <i class="text-danger width-23 height-23" data-feather="file"></i>
                                            <div class="mt-2">File Manager</div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- end::header app list -->

                <!-- begin::header messages dropdown -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link nav-link-notify" title="Messages" data-toggle="dropdown">
                        <i data-feather="message-circle"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-big">
                        <div class="p-4 text-center" data-backround-image="assets/media/image/image1.png">
                            <h6 class="mb-1">Messages</h6>
                            <small class="font-size-11 opacity-7">2 unread messages</small>
                        </div>
                        <div>
                            <ul class="list-group list-group-flush">
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/man_avatar1.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Herbie Pallatina
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-circle-o font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">02:30 PM</span>
                                                <span>Have you madimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/women_avatar5.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Andrei Miners
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-circle-o font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">08:36 PM</span>
                                                <span>I have a meetinimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-divider small pb-2 pl-3 pt-3">
                                    <span>Old chats</span>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/man_avatar3.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Kevin added
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">11:09 PM</span>
                                                <span>Have you madimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/man_avatar2.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Eugenio Carnelley
                                                <i title="Mark as read" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">Yesterday</span>
                                                <span>I have a meetinimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <img src="assets/media/image/user/women_avatar1.jpg"
                                                     class="rounded-circle" alt="user">
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Neely Ferdinand
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <div class="small text-muted">
                                                <span class="mr-2">Yesterday</span>
                                                <span>I have a meetinimage</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="p-2 text-right">
                            <ul class="list-inline small">
                                <li class="list-inline-item">
                                    <a href="#">Mark All Read</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <!-- end::header messages dropdown -->

                <!-- begin::header notification dropdown -->
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link nav-link-notify" title="Notifications" data-toggle="dropdown">
                        <i data-feather="bell"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-big">
                        <div class="p-4 text-center" data-backround-image="assets/media/image/image1.png">
                            <h6 class="mb-1">Notifications</h6>
                            <small class="font-size-11 opacity-7">1 unread notifications</small>
                        </div>
                        <div>
                            <ul class="list-group list-group-flush">
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-success-bright text-success rounded-circle">
                                                    <i class="ti-user"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                New customer registered
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-circle-o font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">20 min ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-divider small pb-2 pl-3 pt-3">
                                    <span>Old notifications</span>
                                </li>
                                <li>
                                    <a href="#" class="list-group-item d-flex hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-warning-bright text-warning rounded-circle">
                                                    <i class="ti-package"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                New Order Recieved
                                                <i title="Mark as read" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">45 sec ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-danger-bright text-danger rounded-circle">
                                                    <i class="ti-server"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Server Limit Reached!
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">55 sec ago</span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       class="list-group-item d-flex align-items-center hide-show-toggler">
                                        <div>
                                            <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-info-bright text-info rounded-circle">
                                                    <i class="ti-layers"></i>
                                                </span>
                                            </figure>
                                        </div>
                                        <div class="flex-grow-1">
                                            <p class="mb-0 line-height-20 d-flex justify-content-between">
                                                Apps are ready for update
                                                <i title="Make unread" data-toggle="tooltip"
                                                   class="hide-show-toggler-item fa fa-check font-size-11"></i>
                                            </p>
                                            <span class="text-muted small">Yesterday</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="p-2 text-right">
                            <ul class="list-inline small">
                                <li class="list-inline-item">
                                    <a href="#">Mark All Read</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <!-- end::header notification dropdown -->
            </ul>

            <!-- begin::mobile header toggler -->
            <ul class="navbar-nav d-flex align-items-center">
                <li class="nav-item header-toggler">
                    <a href="#" class="nav-link">
                        <i data-feather="arrow-down"></i>
                    </a>
                </li>
            </ul>
            <!-- end::mobile header toggler -->
        </div>
        <!-- end::header-right -->
    </div>
    <!-- end::header -->

    <!-- begin::main-content -->
    <main class="main-content">

        <div class="container">

            <!-- begin::page-header -->
            <div class="page-header">
                <h4>Buttons</h4>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="#">Home</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="#">Components</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Buttons</li>
                    </ol>
                </nav>
            </div>
            <!-- end::page-header -->

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Default</h6>
                    <div class="row text-center justify-content-md-center">
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-primary">Primary</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-secondary">Secondary</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-success">Success</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-danger">Danger</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-warning">Warning</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-info">Info</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-light">Light</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-dark">Dark</button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;button type="button" class="btn btn-primary"&gt;Primary&lt;/button&gt;
&lt;button type="button" class="btn btn-secondary"&gt;Secondary&lt;/button&gt;
&lt;button type="button" class="btn btn-success"&gt;Success&lt;/button&gt;
&lt;button type="button" class="btn btn-danger"&gt;Danger&lt;/button&gt;
&lt;button type="button" class="btn btn-warning"&gt;Warning&lt;/button&gt;
&lt;button type="button" class="btn btn-info"&gt;Info&lt;/button&gt;
&lt;button type="button" class="btn btn-light"&gt;Light&lt;/button&gt;
&lt;button type="button" class="btn btn-dark"&gt;Dark&lt;/button&gt;</code></pre>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Square</h6>
                    <div class="row text-center justify-content-md-center">
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-primary btn-square">Primary</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-square">Secondary</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-success btn-square">Success</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-danger btn-square">Danger</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-warning btn-square">Warning</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-info btn-square">Info</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-light btn-square">Light</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-dark btn-square">Dark</button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;button type="button" class="btn btn-primary btn-square"&gt;Primary&lt;/button&gt;</code></pre>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Outline</h6>
                    <div class="row text-center justify-content-md-center">
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-outline-primary">Primary</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-outline-secondary">Secondary</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-outline-success">Success</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-outline-danger">Danger</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-outline-warning">Warning</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-outline-info">Info</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-outline-light">Light</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-outline-dark">Dark</button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;button type="button" class="btn btn-outline-primary"&gt;Primary&lt;/button&gt;</code></pre>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Rounded</h6>
                    <div class="row text-center justify-content-md-center">
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-primary btn-rounded">Primary</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-success btn-rounded">Success</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-danger btn-rounded">Danger</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-warning btn-rounded">Warning</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-info btn-rounded">Info</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-light btn-rounded">Light</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-dark btn-rounded">Dark</button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;button type="button" class="btn btn-primary btn-rounded"&gt;Primary&lt;/button&gt;</code></pre>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Uppercase</h6>
                    <div class="row text-center justify-content-md-center">
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-primary btn-uppercase">Primary</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-uppercase">Secondary</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-success btn-uppercase">Success</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-danger btn-uppercase">Danger</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-warning btn-uppercase">Warning</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-info btn-uppercase">Info</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-light btn-uppercase">Light</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-dark btn-uppercase">Dark</button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;button type="button" class="btn btn-primary btn-uppercase"&gt;Primary&lt;/button&gt;</code></pre>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Disabled</h6>
                    <div class="row text-center justify-content-md-center">
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-primary disabled">Primary</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-secondary disabled">Secondary</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-success disabled">Success</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-danger disabled">Danger</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-warning disabled">Warning</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-info disabled">Info</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-light disabled">Light</button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-dark disabled">Dark</button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;button type="button" class="btn btn-primary disabled"&gt;Primary&lt;/button&gt;

&lt;!-- or --&gt;

&lt;button type="button" class="btn btn-primary" disabled&gt;Primary&lt;/button&gt;</code></pre>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Button with Icon</h6>
                    <div class="row text-center justify-content-md-center">
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-outline-secondary btn-uppercase">
                                <i class="ti-plus mr-2"></i> Create User
                            </button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-success btn-uppercase">
                                <i class="ti-check-box mr-2"></i> Save
                            </button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-outline-warning btn-rounded btn-uppercase">
                                <i class="ti-settings mr-2"></i> Settings
                            </button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-danger btn-square btn-uppercase">
                                <i class="ti-trash mr-2"></i> Delete
                            </button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;button type="button" class="btn btn-outline-secondary btn-uppercase"&gt;
  &lt;i class="ti-plus mr-2"&gt;&lt;/i&gt; Create User
&lt;/button&gt;
&lt;button type="button" class="btn btn-success btn-uppercase"&gt;
  &lt;i class="ti-check-box mr-2"&gt;&lt;/i&gt; Save
&lt;/button&gt;
&lt;button type="button" class="btn btn-outline-warning btn-rounded btn-uppercase"&gt;
  &lt;i class="ti-settings mr-2"&gt;&lt;/i&gt; Settings
&lt;/button&gt;
&lt;button type="button" class="btn btn-danger btn-square btn-uppercase"&gt;
  &lt;i class="ti-trash mr-2"&gt;&lt;/i&gt; Delete
&lt;/button&gt;</code></pre>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Only Icon</h6>
                    <div class="row text-center justify-content-md-center">
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-outline-secondary">
                                <i class="ti-plus"></i>
                            </button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-success">
                                <i class="ti-check-box"></i>
                            </button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-warning btn-rounded">
                                <i class="ti-settings"></i>
                            </button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-danger btn-square">
                                <i class="ti-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;button type="button" class="btn btn-outline-secondary"&gt;
  &lt;i class="ti-plus"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" class="btn btn-success"&gt;
  &lt;i class="ti-check-box"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" class="btn btn-warning btn-rounded"&gt;
  &lt;i class="ti-settings"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;button type="button" class="btn btn-danger btn-square"&gt;
  &lt;i class="ti-trash"&gt;&lt;/i&gt;
&lt;/button&gt;</code></pre>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Only Icon Floating</h6>
                    <div class="row text-center justify-content-md-center">
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-floating">
                                <i class="ti-plus"></i>
                            </button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-success btn-floating">
                                <i class="ti-check-box"></i>
                            </button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-warning btn-floating">
                                <i class="ti-settings"></i>
                            </button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-danger btn-floating">
                                <i class="ti-trash"></i>
                            </button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-outline-secondary btn-floating">
                                <i class="ti-plus"></i>
                            </button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-outline-success btn-floating">
                                <i class="ti-check-box"></i>
                            </button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-outline-warning btn-floating">
                                <i class="ti-settings"></i>
                            </button>
                        </div>
                        <div class="col-md-3 m-t-b-20">
                            <button type="button" class="btn btn-outline-danger btn-floating">
                                <i class="ti-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;button type="button" class="btn btn-secondary btn-floating"&gt;
  &lt;i class="ti-plus"&gt;&lt;/i&gt;
&lt;/button&gt;</code></pre>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Loader Buttons</h6>
                    <div class="row text-center justify-content-md-center">
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button class="btn btn-primary" type="button" disabled>
                                    <span class="spinner-border spinner-border-sm mr-2" role="status"
                                          aria-hidden="true"></span>
                                Loading...
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button class="btn btn-primary" type="button" disabled>
                                    <span class="spinner-border spinner-border-sm" role="status"
                                          aria-hidden="true"></span>
                                <span class="sr-only">Loading...</span>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button class="btn btn-primary btn-floating" type="button" disabled>
                                <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                                <span class="sr-only">Loading...</span>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button class="btn btn-outline-primary" type="button" disabled>
                                    <span class="spinner-grow spinner-grow-sm mr-2" role="status"
                                          aria-hidden="true"></span>
                                Loading...
                            </button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;button type="button" class="btn btn-primary" disabled&gt;
  &lt;span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"&gt;&lt;/span&gt;
  Loading...
&lt;/button&gt;</code></pre>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Pulse</h6>
                    <div class="row text-center justify-content-md-center">
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-primary btn-pulse">
                                <i class="ti-user mr-2"></i> Profile
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-outline-warning btn-pulse">
                                <i class="ti-settings mr-2"></i> Settings
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-pulse">
                                <i class="ti-plus"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-success btn-floating btn-pulse">
                                <i class="ti-check"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-outline-danger btn-lg btn-floating btn-pulse">
                                <i class="ti-trash"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-outline-secondary btn-lg btn-floating btn-pulse">
                                <i class="ti-plus"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-whatsapp btn-floating btn-lg btn-pulse">
                                <i class="fa fa-whatsapp"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-dribbble btn-floating btn-lg btn-pulse">
                                <i class="fa fa-dribbble"></i>
                            </button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;button type="button" class="btn btn-primary btn-pulse"&gt;
  &lt;i class="ti-user mr-2"&gt;&lt;/i&gt; Profile
&lt;/button&gt;</code></pre>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Store Buttons</h6>
                    <div class="row text-center justify-content-md-center">
                        <div class="col-lg-5 col-sm-6 m-t-b-20">
                            <a href="#" class="btn btn-apple">
                                <i class="fa fa-apple"></i>
                                <span>
                                   <span>Download on the</span>
                                   <span>App Store</span>
                              </span>
                            </a>
                        </div>
                        <div class="col-lg-5 col-sm-6 m-t-b-20">
                            <a href="#" class="btn btn-google-play">
                                <img src="assets/media/image/google_play_button.png" alt="image">
                                <span>
                            <span>Get in on</span>
                            <span>Google Play</span>
                        </span>
                            </a>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;a href="#" class="btn btn-apple"&gt;
  &lt;i class="fa fa-apple"&gt;&lt;/i&gt;
  &lt;span&gt;
    &lt;span&gt;Download on the&lt;/span&gt;
    &lt;span&gt;App Store&lt;/span&gt;
  &lt;/span&gt;
&lt;/a&gt;

&lt;a href="#" class="btn btn-google-play"&gt;
  &lt;img src="google_play_button.png" alt="image"&gt;
  &lt;span&gt;
     &lt;span&gt;Get in on&lt;/span&gt;
     &lt;span&gt;Google Play&lt;/span&gt;
   &lt;/span&gt;
&lt;/a&gt;</code></pre>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Social Buttons</h6>
                    <div class="row text-center justify-content-md-center">
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-facebook">
                                <i class="fa fa-facebook-square mr-2"></i> Facebook
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-google">
                                <i class="fa fa-google mr-2"></i> Google
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-twitter">
                                <i class="fa fa-twitter mr-2"></i> Twitter
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-linkedin">
                                <i class="fa fa-linkedin mr-2"></i> Linkedin
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-outline-facebook">
                                <i class="fa fa-facebook-square mr-2"></i> Facebook
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-outline-google">
                                <i class="fa fa-google mr-2"></i> Google
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-outline-twitter">
                                <i class="fa fa-twitter mr-2"></i> Twitter
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-outline-linkedin">
                                <i class="fa fa-linkedin mr-2"></i> Linkedin
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-facebook">
                                <i class="fa fa-facebook-square"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-google">
                                <i class="fa fa-google"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-twitter">
                                <i class="fa fa-twitter"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-linkedin">
                                <i class="fa fa-linkedin"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-facebook btn-floating">
                                <i class="fa fa-facebook-square"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-google btn-floating">
                                <i class="fa fa-google"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-twitter btn-floating">
                                <i class="fa fa-twitter"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-linkedin btn-floating">
                                <i class="fa fa-linkedin"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-whatsapp">
                                <i class="fa fa-whatsapp mr-2"></i> Whatsapp
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-instagram">
                                <i class="fa fa-instagram mr-2"></i> Instagram
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-dribbble">
                                <i class="fa fa-dribbble mr-2"></i> Dribbble
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-youtube">
                                <i class="fa fa-youtube mr-2"></i> Youtube
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-outline-whatsapp">
                                <i class="fa fa-whatsapp mr-2"></i> Whatsapp
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-outline-instagram">
                                <i class="fa fa-instagram mr-2"></i> Instagram
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-outline-dribbble">
                                <i class="fa fa-dribbble mr-2"></i> Dribbble
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-outline-youtube">
                                <i class="fa fa-youtube mr-2"></i> Youtube
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 mb-5">
                            <button type="button" class="btn btn-whatsapp">
                                <i class="fa fa-whatsapp"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-instagram">
                                <i class="fa fa-instagram"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-dribbble">
                                <i class="fa fa-dribbble"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-youtube">
                                <i class="fa fa-youtube"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-whatsapp btn-floating">
                                <i class="fa fa-whatsapp"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-instagram btn-floating">
                                <i class="fa fa-instagram"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-dribbble btn-floating">
                                <i class="fa fa-dribbble"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-youtube btn-floating">
                                <i class="fa fa-youtube"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-github">
                                <i class="fa fa-github mr-2"></i> Github
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-behance">
                                <i class="fa fa-behance mr-2"></i> Behance
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-skype">
                                <i class="fa fa-skype mr-2"></i> Skype
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-yahoo">
                                <i class="fa fa-yahoo mr-2"></i> Yahoo
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-outline-github">
                                <i class="fa fa-github mr-2"></i> Github
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-outline-behance">
                                <i class="fa fa-behance mr-2"></i> Behance
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-outline-skype">
                                <i class="fa fa-skype mr-2"></i> Skype
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-outline-yahoo">
                                <i class="fa fa-yahoo mr-2"></i> Yahoo
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-github">
                                <i class="fa fa-github"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-behance">
                                <i class="fa fa-behance"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-skype">
                                <i class="fa fa-skype"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-yahoo">
                                <i class="fa fa-yahoo"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-github btn-floating">
                                <i class="fa fa-github"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-behance btn-floating">
                                <i class="fa fa-behance"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-skype btn-floating">
                                <i class="fa fa-skype"></i>
                            </button>
                        </div>
                        <div class="col-lg-3 col-sm-6 m-t-b-20">
                            <button type="button" class="btn btn-yahoo btn-floating">
                                <i class="fa fa-yahoo"></i>
                            </button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;button type="button" class="btn btn-facebook"&gt;
  &lt;i class="fa fa-facebook-square mr-2"&gt;&lt;/i&gt; Facebook
&lt;/button&gt;
&lt;button type="button" class="btn btn-google"&gt;
  &lt;i class="fa fa-google mr-2"&gt;&lt;/i&gt; Google
&lt;/button&gt;
&lt;button type="button" class="btn btn-twitter"&gt;
  &lt;i class="fa fa-twitter mr-2"&gt;&lt;/i&gt; Twitter
&lt;/button&gt;
&lt;button type="button" class="btn btn-linkedin"&gt;
  &lt;i class="fa fa-linkedin mr-2"&gt;&lt;/i&gt; Linkedin
&lt;/button&gt;
...</code></pre>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Sizes</h6>
                    <div class="row text-center justify-content-md-center align-items-center">

                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-sm">Button</button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary">Button</button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-lg">Button</button>
                        </div>

                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-square btn-sm">Button</button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-square">Button</button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-square btn-lg">Button</button>
                        </div>

                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-outline-secondary btn-sm">Button</button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-outline-secondary">Button</button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-outline-secondary btn-lg">Button</button>
                        </div>

                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-rounded btn-sm">Button</button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-rounded">Button</button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-rounded btn-lg">Button</button>
                        </div>

                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-uppercase btn-sm">Button</button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-uppercase">Button</button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-uppercase btn-lg">Button</button>
                        </div>

                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary disabled btn-sm">Button</button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary disabled">Button</button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary disabled btn-lg">Button</button>
                        </div>

                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-sm">
                                <i class="ti-settings m-r-5"></i> Button
                            </button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary">
                                <i class="ti-settings m-r-5"></i> Button
                            </button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-lg">
                                <i class="ti-settings m-r-10"></i> Button
                            </button>
                        </div>

                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-sm">
                                <i class="ti-control-play"></i>
                            </button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary">
                                <i class="ti-control-play"></i>
                            </button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-lg">
                                <i class="ti-control-play"></i>
                            </button>
                        </div>

                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-floating btn-sm">
                                <i class="ti-control-play"></i>
                            </button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-floating">
                                <i class="ti-control-play"></i>
                            </button>
                        </div>
                        <div class="col-md-4 m-t-b-20">
                            <button type="button" class="btn btn-secondary btn-floating btn-lg">
                                <i class="ti-control-play"></i>
                            </button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;button type="button" class="btn btn-secondary btn-sm"&gt;Button&lt;/button&gt;
&lt;button type="button" class="btn btn-secondary"&gt;Button&lt;/button&gt;
&lt;button type="button" class="btn btn-secondary btn-lg"&gt;Button&lt;/button&gt;</code></pre>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Button Group</h6>

                    <div class="btn-group" role="group" aria-label="Basic example">
                        <button type="button" class="btn btn-dark">Left</button>
                        <button type="button" class="btn btn-dark">Middle</button>
                        <button type="button" class="btn btn-dark">Right</button>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;div class="btn-group" role="group" aria-label="Basic example"&gt;
  &lt;button type="button" class="btn btn-dark"&gt;Left&lt;/button&gt;
  &lt;button type="button" class="btn btn-dark"&gt;Middle&lt;/button&gt;
  &lt;button type="button" class="btn btn-dark"&gt;Right&lt;/button&gt;
&lt;/div&gt;</code></pre>
                    </div>

                    <div class="btn-group" role="group" aria-label="Basic example">
                        <button type="button" class="btn btn-primary">
                            <i class="ti-control-pause"></i>
                        </button>
                        <button type="button" class="btn btn-success">
                            <i class="ti-control-play"></i>
                        </button>
                        <button type="button" class="btn btn-warning">
                            <i class="ti-control-forward"></i>
                        </button>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;div class="btn-group" role="group" aria-label="Basic example"&gt;
  &lt;button type="button" class="btn btn-primary"&gt;
    &lt;i class="ti-control-pause"&gt;&lt;/i&gt;
  &lt;/button&gt;
  &lt;button type="button" class="btn btn-success"&gt;
    &lt;i class="ti-control-play"&gt;&lt;/i&gt;
  &lt;/button&gt;
  &lt;button type="button" class="btn btn-warning"&gt;
    &lt;i class="ti-control-forward"&gt;&lt;/i&gt;
  &lt;/button&gt;
&lt;/div&gt;</code></pre>
                    </div>

                    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                        <div class="btn-group mr-2" role="group" aria-label="First group">
                            <button type="button" class="btn btn-dark">1</button>
                            <button type="button" class="btn btn-dark">2</button>
                            <button type="button" class="btn btn-dark">3</button>
                            <button type="button" class="btn btn-dark">4</button>
                        </div>
                        <div class="btn-group mr-2" role="group" aria-label="Second group">
                            <button type="button" class="btn btn-dark">5</button>
                            <button type="button" class="btn btn-dark">6</button>
                            <button type="button" class="btn btn-dark">7</button>
                        </div>
                        <div class="btn-group" role="group" aria-label="Third group">
                            <button type="button" class="btn btn-dark">8</button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"&gt;
  &lt;div class="btn-group mr-2" role="group" aria-label="First group"&gt;
    &lt;button type="button" class="btn btn-dark"&gt;1&lt;/button&gt;
    &lt;button type="button" class="btn btn-dark"&gt;2&lt;/button&gt;
    &lt;button type="button" class="btn btn-dark"&gt;3&lt;/button&gt;
    &lt;button type="button" class="btn btn-dark"&gt;4&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="btn-group mr-2" role="group" aria-label="Second group"&gt;
    &lt;button type="button" class="btn btn-dark"&gt;5&lt;/button&gt;
    &lt;button type="button" class="btn btn-dark"&gt;6&lt;/button&gt;
    &lt;button type="button" class="btn btn-dark"&gt;7&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="btn-group" role="group" aria-label="Third group"&gt;
    &lt;button type="button" class="btn btn-dark"&gt;8&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>

                    <div>
                        <div class="btn-group btn-group-lg mb-3" role="group" aria-label="Large button group">
                            <button type="button" class="btn btn-dark">Left</button>
                            <button type="button" class="btn btn-dark">Middle</button>
                            <button type="button" class="btn btn-dark">Right</button>
                        </div>
                        <br>
                        <div class="btn-group mb-3" role="group" aria-label="Default button group">
                            <button type="button" class="btn btn-dark">Left</button>
                            <button type="button" class="btn btn-dark">Middle</button>
                            <button type="button" class="btn btn-dark">Right</button>
                        </div>
                        <br>
                        <div class="btn-group btn-group-sm mb-3" role="group" aria-label="Small button group">
                            <button type="button" class="btn btn-dark">Left</button>
                            <button type="button" class="btn btn-dark">Middle</button>
                            <button type="button" class="btn btn-dark">Right</button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;div class="btn-group btn-group-lg" role="group" aria-label="Large button group"&gt;
  &lt;button type="button" class="btn btn-dark"&gt;Left&lt;/button&gt;
  &lt;button type="button" class="btn btn-dark"&gt;Middle&lt;/button&gt;
  &lt;button type="button" class="btn btn-dark"&gt;Right&lt;/button&gt;
&lt;/div&gt;

&lt;div class="btn-group" role="group" aria-label="Default button group"&gt;
  &lt;button type="button" class="btn btn-dark"&gt;Left&lt;/button&gt;
  &lt;button type="button" class="btn btn-dark"&gt;Middle&lt;/button&gt;
  &lt;button type="button" class="btn btn-dark"&gt;Right&lt;/button&gt;
&lt;/div&gt;

&lt;div class="btn-group btn-group-sm" role="group" aria-label="Small button group"&gt;
  &lt;button type="button" class="btn btn-dark"&gt;Left&lt;/button&gt;
  &lt;button type="button" class="btn btn-dark"&gt;Middle&lt;/button&gt;
  &lt;button type="button" class="btn btn-dark"&gt;Right&lt;/button&gt;
&lt;/div&gt;</code></pre>
                    </div>

                    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                        <button type="button" class="btn btn-dark">1</button>
                        <button type="button" class="btn btn-dark">2</button>

                        <div class="btn-group" role="group">
                            <button id="btnGroupDrop1" type="button" class="btn btn-dark dropdown-toggle"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown
                            </button>
                            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                <a class="dropdown-item" href="#">Dropdown link</a>
                                <a class="dropdown-item" href="#">Dropdown link</a>
                            </div>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;div class="btn-group" role="group" aria-label="Button group with nested dropdown"&gt;
  &lt;button type="button" class="btn btn-dark"&gt;1&lt;/button&gt;
  &lt;button type="button" class="btn btn-dark"&gt;2&lt;/button&gt;

  &lt;div class="btn-group" role="group"&gt;
    &lt;button id="btnGroupDrop1" type="button" class="btn btn-dark dropdown-toggle"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
      Dropdown
    &lt;/button&gt;
    &lt;div class="dropdown-menu" aria-labelledby="btnGroupDrop1"&gt;
      &lt;a class="dropdown-item" href="#"&gt;Dropdown link&lt;/a&gt;
      &lt;a class="dropdown-item" href="#"&gt;Dropdown link&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>

                    <div class="d-flex">
                        <div class="btn-group-vertical mr-3" role="group" aria-label="Vertical button group">
                            <button type="button" class="btn btn-primary">
                                <i class="fa fa-cloud-upload"></i>
                            </button>
                            <button type="button" class="btn btn-primary">
                                <i class="fa fa-calendar"></i>
                            </button>
                            <button type="button" class="btn btn-primary">
                                <i class="fa fa-database"></i>
                            </button>
                            <button type="button" class="btn btn-primary">
                                <i class="fa fa-cog"></i>
                            </button>
                            <button type="button" class="btn btn-primary">
                                <i class="fa fa-heart-o"></i>
                            </button>
                            <button type="button" class="btn btn-primary">
                                <i class="fa fa-share"></i>
                            </button>
                        </div>
                        <div class="btn-group-vertical mr-3" role="group" aria-label="Vertical button group">
                            <button type="button" class="btn btn-success">
                                <i class="fa fa-cloud-upload"></i>
                            </button>
                            <button type="button" class="btn btn-success">
                                <i class="fa fa-calendar"></i>
                            </button>
                            <button type="button" class="btn btn-success">
                                <i class="fa fa-database"></i>
                            </button>
                            <button type="button" class="btn btn-success">
                                <i class="fa fa-cog"></i>
                            </button>
                            <button type="button" class="btn btn-success">
                                <i class="fa fa-heart-o"></i>
                            </button>
                            <button type="button" class="btn btn-success">
                                <i class="fa fa-share"></i>
                            </button>
                        </div>
                        <div class="btn-group-vertical mr-3" role="group" aria-label="Vertical button group">
                            <button type="button" class="btn btn-danger">
                                <i class="fa fa-cloud-upload"></i>
                            </button>
                            <button type="button" class="btn btn-danger">
                                <i class="fa fa-calendar"></i>
                            </button>
                            <button type="button" class="btn btn-danger">
                                <i class="fa fa-database"></i>
                            </button>
                            <button type="button" class="btn btn-danger">
                                <i class="fa fa-cog"></i>
                            </button>
                            <button type="button" class="btn btn-danger">
                                <i class="fa fa-heart-o"></i>
                            </button>
                            <button type="button" class="btn btn-danger">
                                <i class="fa fa-share"></i>
                            </button>
                        </div>
                        <div class="btn-group-vertical mr-3" role="group" aria-label="Vertical button group">
                            <button type="button" class="btn btn-warning">
                                <i class="fa fa-cloud-upload"></i>
                            </button>
                            <button type="button" class="btn btn-warning">
                                <i class="fa fa-calendar"></i>
                            </button>
                            <button type="button" class="btn btn-warning">
                                <i class="fa fa-database"></i>
                            </button>
                            <button type="button" class="btn btn-warning">
                                <i class="fa fa-cog"></i>
                            </button>
                            <button type="button" class="btn btn-warning">
                                <i class="fa fa-heart-o"></i>
                            </button>
                            <button type="button" class="btn btn-warning">
                                <i class="fa fa-share"></i>
                            </button>
                        </div>
                        <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
                            <button type="button" class="btn btn-info">
                                <i class="fa fa-cloud-upload"></i>
                            </button>
                            <button type="button" class="btn btn-info">
                                <i class="fa fa-calendar"></i>
                            </button>
                            <button type="button" class="btn btn-info">
                                <i class="fa fa-database"></i>
                            </button>
                            <button type="button" class="btn btn-info">
                                <i class="fa fa-cog"></i>
                            </button>
                            <button type="button" class="btn btn-info">
                                <i class="fa fa-heart-o"></i>
                            </button>
                            <button type="button" class="btn btn-info">
                                <i class="fa fa-share"></i>
                            </button>
                        </div>
                    </div>
                    <div data-label="CODE EXAMPLE" class="demo-code-preview">
                        <pre><code class="language-html">&lt;div class="btn-group-vertical" role="group" aria-label="Vertical button group"&gt;
  &lt;button type="button" class="btn btn-primary"&gt;
    &lt;i class="fa fa-cloud-upload"&gt;&lt;/i&gt;
  &lt;/button&gt;
  &lt;button type="button" class="btn btn-primary"&gt;
    &lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
  &lt;/button&gt;
  &lt;button type="button" class="btn btn-primary"&gt;
    &lt;i class="fa fa-database"&gt;&lt;/i&gt;
  &lt;/button&gt;
  &lt;button type="button" class="btn btn-primary"&gt;
    &lt;i class="fa fa-cog"&gt;&lt;/i&gt;
  &lt;/button&gt;
  &lt;button type="button" class="btn btn-primary"&gt;
    &lt;i class="fa fa-heart-o"&gt;&lt;/i&gt;
  &lt;/button&gt;
  &lt;button type="button" class="btn btn-primary"&gt;
    &lt;i class="fa fa-share"&gt;&lt;/i&gt;
  &lt;/button&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
            </div>

        </div>

    </main>
    <!-- end::main-content -->

    <!-- begin::footer -->
    <footer>
        <div class="container">
            <div>© 2019 Protable v1.0.0 Made by <a href="http://laborasyon.com">Laborasyon</a></div>
            <div>
                <nav class="nav">
                    <a href="https://themeforest.net/licenses/standard" class="nav-link">Licenses</a>
                    <a href="#" class="nav-link">Change Log</a>
                    <a href="#" class="nav-link">Get Help</a>
                </nav>
            </div>
        </div>
    </footer>
    <!-- end::footer -->

</div>
<!-- end::main -->

<!-- Plugin scripts -->
<script src="vendors/bundle.js"></script>

<!-- Prism -->
<script src="vendors/prism/prism.js"></script>

<!-- App scripts -->
<script src="assets/js/app.min.js"></script>
</body>
</html>